<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-15 22:39:07
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-24 22:55:18
 * @FilePath: /chat-ai-plus/src/components/store/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="store-container">
    <view class="card">
      <view class="align-items_center justify_between">
        <view class="heading h4">  {{$t('store.official.title') }}</view>
        <view>  {{$t('store.official.seeAll') }}</view>
      </view>
      <view class="store-list mt_sm">
        <view class="item" v-for="item in storeList" :key="item.name">
          <u-cell class="cell" :label="item.description">
            <template #icon>
              <u-image
                width="28px"
                height="28px"
                :src="`/static/images/${item.icon}@2x.png`"
                shape="circle"
              ></u-image>
            </template>
            <template #title>
              <view>{{item.name}}</view>
            </template>

            <template #value>
              <view>
                <u-button
                  type="primary"
                  text="确定"
                  class="px_md"
                  shape="circle"
                  @click="handleChange(item.name)"
                ></u-button
              ></view>
            </template>
          </u-cell>
        </view>
     
      </view>
    </view>
    
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { aiModels } from '@/model/index';
import useChatStore from '@/store/modules/chat';
import { navigateTo } from '@/utils/uni';

export default defineComponent({
  name: 'Store',
  setup() {
    const chatStore = useChatStore();
    const storeList = ref([...aiModels]) 
   

    const handleChange = name => {
      chatStore.clearConversations();
      chatStore.setCurrentRoom();
      chatStore.toggleModel(name);
      navigateTo('app')
    };
    return {
      storeList,
      handleChange

    }
  }
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.store-container {
  background: $white-color;

}
.card {
  background: map-get($border-colors, default);
  border-radius: $radius;
  padding: map-get($spaces, sm);
  & + .card {
    margin-top: map-get($spaces, default);
  }
}
.store-list {
  box-sizing: border-box;
}
.cell {
  :v-deep(.u-cell__title-text),
  :v-deep(.u-cell__label) {
    display: block;
  }
}

.item {
  background: #fff;
  border-radius: 16px;
}
.item + .item {
  margin-top: 8px;
}
</style>

